<style type="text/css"> 
  div#map {
    position: relative;
  }
 
  div#crosshair {
    position: absolute;
    top: 192px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
    /* background: url(/publicradioroadtrip/static/crosshair.gif); */
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
  var map;
  var geocoder;
  var centerChangedLast;
  var reverseGeocodedLast;
  var currentReverseGeocodeResponse;

    {{k =length}}
    // the stories array will be used in setMarkers to display markers and info ballons on the map.
    var stories = [{{for story in story_list:}}
    ['{{=story['title']}}', {{=story['latitude']}}, {{=story['longitude']}}, '{{=story['description']}}', '{{=story['url']}}','{{=story['date']}}','{{=story['image_url']}}','{{=story['audio_url']}}'],{{pass}}
    ];
    
  function initialize(){
    // latlng is used to set the center of the map
    var latlng = new google.maps.LatLng({{=story_list[0]['latitude']}},{{=story_list[0]['longitude']}});
    
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
 
     // this calls the setMarkers function, displays stories on the map
    setMarkers(map, stories);
    
    // setupEvents();
    // centerChanged();
  }
 

function bindInfoWindow(marker, contentString, infowindow)
{
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
}

function setMarkers(map, stories) {
    // setMarkers displays markers on the map
 
    // alert(stories.length);
    for (var i = 0; i < stories.length; i++) {
        // alert(story);
        var story = stories[i];
        var myLatLng = new google.maps.LatLng(story[1], story[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            title: story[0],
            zIndex: i
        });
    // contentString contains the formatting for the information bubbles that appear when someone clicks on a pin on the map.
    var contentString = '<div id="content">'+
    '<h4 id="firstHeading" class="firstHeading">' + story[0] + '</h4>'+
    '<div id="bodyContent">'+
    '<p><img src="' + story[6] + '"></p>'+
    '<p>' + story[3] + '</p>' +
    '<p><object width="400" height="40"> <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param><param name="flashvars" value="src=' + story[7] + '&playButtonOverlay=false&autoPlay=true"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="40" flashvars="src=' + story[7] + '&playButtonOverlay=false&autoPlay=true"></embed></object></p>'+
    '<p><a href="' + story[4] + '" target ="_blank">View Story</a></p>'+
    '</div>'+
    '</div>';
    // alert(contentString);
    
    infowindow = new google.maps.InfoWindow();

    bindInfoWindow(marker, contentString, infowindow);

    marker.setMap(map);

    }

}

  function setupEvents() {
    reverseGeocodedLast = new Date();
    centerChangedLast = new Date();
 
    setInterval(function() {
      if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
        if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
          reverseGeocode();
      }
    }, 1000);
 
    google.maps.event.addListener(map, 'zoom_changed', function() {
      document.getElementById("zoom_level").innerHTML = map.getZoom();
    });
 
    google.maps.event.addListener(map, 'center_changed', centerChanged);
 
    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
       map.setZoom(map.getZoom() + 1);
    });
 
  }
 
  function getCenterLatLngText() {
    return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
  }
 
  function centerChanged() {
    centerChangedLast = new Date();
    var latlng = getCenterLatLngText();
    document.getElementById('latlng').innerHTML = latlng;
    document.getElementById('formatedAddress').innerHTML = '';
    currentReverseGeocodeResponse = null;
  }
 
  function reverseGeocode() {
    reverseGeocodedLast = new Date();
    geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
  }
 
  function reverseGeocodeResult(results, status) {
    currentReverseGeocodeResponse = results;
    if(status == 'OK') {
      if(results.length == 0) {
        document.getElementById('formatedAddress').innerHTML = 'None';
      } else {
        document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
      }
    } else {
      document.getElementById('formatedAddress').innerHTML = 'Error';
    }
  }
 
 
  function geocode() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
      'address': address,
      'partialmatch': true}, geocodeResult);
  }
 
  function geocodeResult(results, status) {
    if (status == 'OK' && results.length > 0) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  }
 
  function addMarkerAtCenter() {

    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
    });
 
    var text = 'Lat/Lng: ' + getCenterLatLngText();
    if(currentReverseGeocodeResponse) {
      var addr = '';
      if(currentReverseGeocodeResponse.size == 0) {
        addr = 'None';
      } else {
        addr = currentReverseGeocodeResponse[0].formatted_address;
      }
      text = text + '<br>' + 'address: <br>' + addr;
    }
 
    var infowindow = new google.maps.InfoWindow({ content: text });
 
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });


    // alert(map.getCenter().lat());
    // alert(map.getCenter().lng());
    document.story_form.story_latitude.value = map.getCenter().lat();
    document.story_form.story_longitude.value = map.getCenter().lng();
    document.story_form.story_address.value = currentReverseGeocodeResponse[0].formatted_address;
  }
 
</script>

